<template>
	<view class="container">
		<!-- <view class="">
			<button type="default" @click="test">test</button>
		</view> -->
		<uni-forms ref="form" :value="formData" validateTrigger="bind">
			<view class="" style="padding-top: 50rpx;"></view>
			<uni-forms-item name="ID" :label="$w('统一编号')" required class="align-items-center">
				<view class="margin-bottom-10">
					<text class="color-555">{{$w('展示空间统一编号（系统自动生成）')}}</text>
				</view>
				<uni-easyinput v-model="formData.ID" disabled=""></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item class="align-items-center background" name="name" :label="$w('名称')" required="">
				<view class="shop-name-note">
					<text>{{$w('可输入公司（机构）名称，或自定名称。')}}</text>
				</view>
				<uni-easyinput style="margin-bottom: 20rpx;" :placeholder="$w('输入名称')" v-model="formData.name[locaLang]" trim
					@input="onInputName" />
				<view class="multi-btn-group">
					<view class="title-box">
						<text>{{$w('多语言')}}</text>
					</view>
					<view class="">
						<button type="primary" size="mini" @click="translateNameMulti">{{$w('一键翻译')}}</button>
					</view>
					<view class="right-text-box" @click="formData.name.showMultiLang=!formData.name.showMultiLang">
						<text>{{formData.name.showMultiLang?$w('收起'):$w('展开')}}</text>
						<uni-icons :type="formData.name.showMultiLang ? 'up' : 'down'" color="#999"></uni-icons>
					</view>
				</view>
				<template v-for="(item,index) in otherLang" :key="index" v-if="formData.name.showMultiLang">
					<view class="multi-lang-box">
						<view class="top-btn-box">
							<view class="">
								<text>{{item.text}}</text>
							</view>
							<!-- <view class="">
								<button type="primary" size="mini"
									@click="formData.name.en=formData.name['zh-Hans']">同步中文</button>
							</view> -->
							<view class="">
								<button type="primary" size="mini" @click="translateNameSelf('en')">{{$w('翻译本条')}}</button>
							</view>
						</view>
						<uni-easyinput type="textarea" v-model="formData.name['en']" placeholder="" />
					</view>
				</template>

			</uni-forms-item>
			<!-- <uni-forms-item class="align-items-center background" name="short_name" label="公司简称">
				<view class="shop-name-note">
					<text>简称</text>
				</view>
				<uni-easyinput placeholder="简称" v-model="formData.short_name['zh-Hans']" />
			</uni-forms-item> -->

			<uni-forms-item class="align-items-center" name="logo_src" label="logo">
				<cloud-image-alioss uploadDir="allian-sys/shops/logo" v-model="formData.logo_src"></cloud-image-alioss>
			</uni-forms-item>
			<uni-forms-item class="align-items-center" name="banner" :label="$w('主图')">
				<view class="margin-bottom-10">
					<text class="color-555">{{$w('用于主页面显示')}}</text>
				</view>
				<cloud-image-alioss uploadDir="allian-sys/shops/banner" v-model="formData.banner"></cloud-image-alioss>
			</uni-forms-item>
			<uni-forms-item class="align-items-center" name="business_license" :label="$w('营业执照')">
				<cloud-image-alioss uploadDir="allian-sys/shops/license"
					v-model="formData.business_license"></cloud-image-alioss>
			</uni-forms-item>
			<uni-forms-item class="align-items-center background" name="shop_desc" :label="$w('简介')">
				<uni-easyinput type="textarea" :placeholder="$w('输入介绍文字')" v-model="formData.shop_desc[locaLang]"
					@input="onInputDesc" />
				<view class="multi-btn-group margin-top-20">
					<view class="title-box">
						<text>{{$w('多语言')}}</text>
					</view>
					<view class="">
						<button type="primary" size="mini" @click="translateDescMulti">{{$w('一键翻译')}}</button>
					</view>
					<view class="right-text-box"
						@click="formData.shop_desc.showMultiLang=!formData.shop_desc.showMultiLang">
						<text>{{formData.shop_desc.showMultiLang?$w('收起'):$w('展开')}}</text>
						<uni-icons :type="formData.shop_desc.showMultiLang ? 'up' : 'down'" color="#999"></uni-icons>
					</view>
				</view>
				<template v-for="(item,index) in otherLang" :key="item.lang" v-if="formData.shop_desc.showMultiLang">
					<view class="multi-lang-box">
						<view class="top-btn-box">
							<view class="">
								<text>{{item.text}}</text>
							</view>
							<!-- <view class="">
								<button type="primary" size="mini"
									@click="formData.shop_desc.en=formData.shop_desc['zh-Hans']">同步中文</button>
							</view> -->
							<view class="">
								<button type="primary" size="mini" @click="translateDescSelf('en')">{{$w('翻译本条')}}</button>
							</view>
						</view>
						<uni-easyinput type="textarea" v-model="formData.shop_desc[item.lang]" placeholder="" />
					</view>
				</template>
			</uni-forms-item>
			<!-- <uni-forms-item name="location" label="位置">
				<view class="" v-if="showLocation">
					<view class="">
						<text class="font-28 color-555">名称：</text>
						<text class="font-28 color-555">{{formData.location.name}}</text>
					</view>
					<view class="">
						<text class="font-28 color-555">地址：</text>
						<text
							class="font-28 color-555">{{`乌鲁木齐市头屯河区头屯河公路2201号 新疆恒汇机电城 ${formData.address.address_number} 号`}}</text>
					</view>
					<view class="">
						<text class="font-28 color-555">位置的经纬度：</text>
						<text
							class="font-28 color-555">{{`[${formData.location.longitude}, ${formData.location.latitude}]`}}</text>
					</view>
				</view>
				<view class="location-box" @click="toChooseLocation">
					<text class="colorGray margin-right-20">请在地图上选择商铺位置</text>
					<wjf-iconfont code="e7b3" color="deepskyblue" size="15"></wjf-iconfont>
				</view>
			</uni-forms-item> -->
			<uni-forms-item  name="phone" :label="$w('联系电话')">
				<view class="phone-input">
					<view class="country-code" @click="toggleDropdown">
						+{{ selectedCode }} <text>▼</text>
					</view>
					<uni-easyinput :placeholder="$w('联系电话')" v-model="formData.phone.contact" trim />
				</view>
				<view v-if="dropdownVisible" class="dropdown">
					<view v-for="(code, index) in codes" :key="index" @click="selectCode(code)" class="dropdown-item">
						+{{ code }}
					</view>
				</view>
				<!-- <uni-easyinput style="margin-bottom: 20rpx;" placeholder="联系电话" v-model="formData.phone.contact" trim /> -->
				<!-- <uni-easyinput style="margin-bottom: 20rpx;" placeholder="负责人电话" type="number"
					v-model="formData.phone.head" trim /> -->
				<!-- <uni-easyinput placeholder="商务合作电话" v-model="formData.phone.business" trim /> -->
			</uni-forms-item>
			<uni-forms-item class="align-items-center" name="website" :label="$w('官网')">
				<uni-easyinput type="textarea" :placeholder="$w('官网网址')" v-model="formData.website" trim />
			</uni-forms-item>
			<uni-forms-item name="online" :label="$w('是否开放')">
				<switch @change="binddata('online', $event.detail.value)" disabled :checked="formData.online" />
			</uni-forms-item>
			<uni-forms-item name="state" :label="$w('是否可用')">
				<switch @change="binddata('state', $event.detail.value)" disabled :checked="formData.state" />
			</uni-forms-item>

		</uni-forms>
		<view class="button-group">
			<button class="button-style" style="width: 100px;" @click="navBack">{{$w('返回')}}</button>
			<button class="button-style" style="width: 100px;" @click="toSaveForm">{{$w('保存')}}</button>
			<button class="button-style" style="width: 100px;background-color: dodgerblue;color: #fff;"
				@click="submit">{{$w('提交审核')}}</button>
		</view>
		<uv-modal ref="uvModal" :title="uvModelParam.title" :content='uvModelParam.content' :align="uvModelParam.align"
			:confirmText="uvModelParam.confirmText" :cancelText="uvModelParam.cancelText"
			:showCancelButton="uvModelParam.showCancelButton"></uv-modal>
	</view>
</template>

<script>
	import message from './i18n-shop/index.js'
	const $w = (key) => {
		return message[uni.getLocale()][key]
	}
	import {
		validator
	} from '@/js_sdk/validator/tian-mall-shops.js';
	const db = uniCloud.database();
	const dbCmd = db.command;
	const dbCollectionName = 'tian-mall-shops';

	function getValidator(fields) {
		let reuslt = {}
		for (let key in validator) {
			if (fields.includes(key)) {
				reuslt[key] = validator[key]
			}
		}
		return reuslt
	}
	import commMixinWjf from '@/common/mixin/common-mixin-wjf.js'
	import {
		callWithErrorHandling
	} from 'vue';
	// 生成随机字符串
	function generateRandomString(length = 3) {
		const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
		let randomString = '';
		for (let i = 0; i < length; i++) {
			const randomIndex = Math.floor(Math.random() * chars.length);
			randomString += chars.charAt(randomIndex);
		}
		return randomString;
	}
	export default {
		mixins: [commMixinWjf],
		data() {
			return {
				shop_id: '',
				showLocation: false,
				formData: {
					"ID": '', //商户唯一编号，系统自动根据门牌号识别生成
					"address": {
						"address_number": ""
					},
					"banner": "",

					"name": {
						"zh-Hans": '',
						"en": '',
						"ru": '',
						"kk": '',
						showMultiLang: false
					},
					"short_name": {
						"zh-Hans": '',
						"en": '',
						"ru": '',
						"kk": '',
						showMultiLang: false
					},
					// "location": null,
					"location": {
						"name": '',
						"latitude": 0,
						"longitude": 0
					},
					"logo_src": "",
					"business_license": "", //营业执照
					"shop_desc": {
						"zh-Hans": '',
						"en": '',
						"ru": '',
						"kk": '',
						showMultiLang: false
					},
					"website": "",
					"phone": {
						"contact": "",
						"head": "",
						"business": ""
					},
					"online": false, //后期记得要关闭
					"state": false, //后期记得要关闭
					apply_state: -1, //-1未提交， 0审核中，1通过，2拒绝
					// isBounded: true //申请的商铺默认为已绑定，防止user页面被导出 审核通过后，要及时添加user表和shop表
				},
				countries: ['中国', '哈萨克斯坦', '吉尔吉斯斯坦'],
				codes: ['86', '7', '996'],
				selectedCode: '86', // 默认选择中国区号
				phoneNumber: '',
				dropdownVisible: false, // 控制下拉框的显示
				rules: {
					...getValidator(["ID", "address", "name", "short_name", "logo_src", "banner", "shop_desc", "phone",
						"website", "online", "state"
					])
				}
			}
		},
		computed: {
			locaLang() {
				return uni.getLocale()
			},
			$w() {
				return $w
			},
			otherLang() {
				return [{
					lang: 'zh-Hans',
					text: this.$w('简体中文')
				}, {
					lang: 'en',
					text: this.$w('英文')
				}, {
					lang: 'ru',
					text: this.$w('俄文')
				}, {
					lang: 'kk',
					text: this.$w('哈萨克文')
				}].filter(item => item.lang != this.locaLang)
			},
			userInfo() {
				return this.$store.state.user.userInfo
			}
		},
		onLoad(option) {
			if (option.id) {
				this.shop_id = option.id
				this.getDetail(option.id)
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
			this.formData.ID = `${this.userInfo.my_invite_code}-${generateRandomString()}`
		},
		methods: {
			test() {
				console.log(this.otherLang);
			},
			test_() {
				this.$requestUsaNode({
					data: {
						controller: 'translate_api_controller',
						filename: 'special_translate',
						act: 'translateCompanyNameMulti',
						param: {
							targetLang: 'kk',
							content: '京亚联科技（北京）有限公司'
						}
					}
				}).then(res => {
					console.log(res.data);
				})

			},
			toggleDropdown() {
				// console.log(123);
				this.dropdownVisible = !this.dropdownVisible; // 切换下拉框的可见性
			},
			selectCode(code) {
				this.selectedCode = code; // 设置选择的区号
				this.dropdownVisible = false; // 选择后隐藏下拉框
			},
			onInputName(e) {
				setTimeout(() => {
					this.formData.name.en = e
					this.formData.name.ru = e
					this.formData.name.kk = e
				})
			},
			onInputDesc(e) {
				setTimeout(() => {
					this.formData.shop_desc.en = e
					this.formData.shop_desc.ru = e
					this.formData.shop_desc.kk = e
				})
			},
			translateNameMulti() {
				// 替换英文括号
				let name = this.formData.name['zh-Hans'].replace(/\(/g, '（').replace(/\)/g, '）');
				uni.showLoading({
					title: '',
					mask: false
				});
				this.$requestUsaNode({
					data: {
						controller: 'translate_api_controller',
						filename: 'special_translate',
						act: 'translateCompanyNameMulti',
						param: {
							content: name
						}
					}
				}).then(res => {
					console.log(res.data);
					this.formData.name.en = res.data.translations.en
					this.formData.name.ru = res.data.translations.ru
					this.formData.name.kk = res.data.translations.kk
				}).finally(() => {
					uni.hideLoading()
				})
			},
			translateDescMulti() {
				uni.showLoading({
					title: '',
					mask: false
				});
				// 替换英文括号
				let Desc = this.formData.shop_desc['zh-Hans'].replace(/\(/g, '（').replace(/\)/g, '）');
				this.$requestUsaNode({
					data: {
						controller: 'translate_api_controller',
						filename: 'special_translate',
						act: 'translateCompanyDescMulti',
						param: {
							content: Desc
						}
					}
				}).then(res => {
					console.log(res.data);
					this.formData.shop_desc.en = res.data.translations.en
					this.formData.shop_desc.ru = res.data.translations.ru
					this.formData.shop_desc.kk = res.data.translations.kk
				}).finally(() => {
					uni.hideLoading()
				})
			},
			translateNameSelf(lang) {
				uni.showLoading({
					title: '',
					mask: false
				});
				this.$requestUsaNode({
					data: {
						controller: 'translate_api_controller',
						filename: 'special_translate',
						act: 'translateCompanyNameSingle',
						param: {
							targetLang: lang,
							content: this.formData.name[lang]
						}
					}
				}).then(res => {
					console.log(res.data);
					this.formData.name[lang] = res.data.translations[lang]
				}).finally(() => {
					uni.hideLoading()
				})
			},
			translateDescSelf(lang) {
				uni.showLoading({
					title: '',
					mask: false
				});
				this.$requestUsaNode({
					data: {
						controller: 'translate_api_controller',
						filename: 'special_translate',
						act: 'translateCompanyDescSingle',
						param: {
							targetLang: lang,
							content: this.formData.shop_desc[lang]
						}
					}
				}).then(res => {
					console.log(res.data);
					this.formData.shop_desc[lang] = res.data.translations[lang]
				}).finally(() => {
					uni.hideLoading()
				})
			},
			navBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			/**
			 * 触发表单提交
			 */
			async submit() {
				uni.showLoading({
					mask: true
				})
				// validate
				this.$refs.form.validate().then((res) => {
					console.log(res);
					if (this.shop_id) {
						this.submitFormUpdate(res)
					} else {
						this.submitFormAdd(res)
					}

				}).catch((errors) => {
					this.$uvModal({
						content: `${this.$w('请注意输入内容的错误提示，有不合规的输入时无法提交。')}`,
						align: 'center',
					})
					uni.hideLoading()
				})
			},
			// 暂时保存
			toSaveForm() {
				console.log(this.userInfo);
				if (this.formData._id) {
					delete this.formData._id
				}
				this.formData.apply_state = -1
				if (this.shop_id) {
					db.collection(dbCollectionName).doc(this.shop_id).update(this.formData).then(() => {
						uni.showToast({
							title: this.$w('保存成功。'),
							duration: 300
						})
						// this.getOpenerEventChannel().emit('refreshData')
						setTimeout(() => uni.navigateBack(), 500)
					}).catch((err) => {
						uni.showModal({
							content: err.message || '请求服务失败',
							showCancel: false
						})
					}).finally(() => {
						uni.hideLoading()
					})
				} else {
					db.collection(dbCollectionName).add(this.formData).then((res) => {
						uni.showToast({
							title: this.$w('保存成功。'),
							duration: 300
						})
						// this.getOpenerEventChannel().emit('refreshData')
						setTimeout(() => uni.navigateBack(), 500)
					}).catch((err) => {
						uni.showModal({
							content: err.message || '请求服务失败',
							showCancel: false
						})
					}).finally(() => {
						uni.hideLoading()
					})
				}
			},
			// 有数据，保存状态
			submitFormUpdate(value) {
				value.apply_state = 0
				db.collection(dbCollectionName).doc(this.shop_id).update(value).then((res) => {
					uni.showToast({
						title: this.$w('提交成功，请等待审核消息。'),
						duration: 500
					})
					// this.getOpenerEventChannel().emit('refreshData')
					setTimeout(() => uni.navigateBack(), 500)
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},

			// 新建
			submitFormAdd(value) {
				// 使用 clientDB 提交数据
				value.apply_state = 0
				// value.shop_owner_id=[this.userInfo._id]  //录入数据时不用，后期要打开注释
				db.collection(dbCollectionName).add(value).then((res) => {
					uni.showToast({
						title: this.$w('提交成功，请等待审核消息。'),
						duration: 300
					})
					// this.getOpenerEventChannel().emit('refreshData')
					setTimeout(() => uni.navigateBack(), 500)
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},
			addressInput(e) {

				let tt = e.trim().replace(/^0/, '').replace(/d/g, 'D').replace(/[_*+.,，。——-]+/g, '-')
				console.log(tt);
				// 如果输入已经是正确格式，直接返回
				if (/^(\d+)-(\d{2})-(\d{2})$/.test(tt)) {
					setTimeout(() => {
						this.formData.address.address_number = tt
						this.formData.ID = tt

					}, 1)
					return

				} else if (/^(\d+)-(D?\d{2})$/.test(tt)) {
					setTimeout(() => {
						this.formData.address.address_number = tt
						this.formData.ID = tt

					}, 1)
					return
				} else if (/^\d+-D/.test(tt)) {
					setTimeout(() => {
						this.formData.address.address_number = tt
						this.formData.ID = tt
					}, 1)
				}



				// let newVal = ''
				// switch (true) {
				// 	case /^(\d+)-(\d+)-(\d+)$/.test(tt):
				// 		newVal = tt.replace(/^(\d+)-(\d+)-(\d+)$/, (match, g1, g2, g3) => {
				// 			// 补齐后两组数字为两位数
				// 			return `${g1}-${g2.padStart(2, '0').slice(0, 4)}-${g3.padStart(2, '0').slice(0, 4)}`;
				// 		})
				// 		break;
				// 	case /^(\d+)-(D?\d+)$/.test(tt):
				// 		newVal = tt.replace(/^(\d+)-(D?\d{2,4})$/, (match, g1, g2) => {
				// 			// 如果有字母D，确保数字最多两位，补足不足的位
				// 			if (/D/i.test(g2)) {
				// 				return `${g1}-${g2.replace(/(\d+)\d*$/, (num) => num.padStart(2, '0').slice(0, 4))}`;
				// 			} else {
				// 				// 如果没有字母D，确保第二组是两位数字
				// 				return `${g1}-${g2.padStart(2, '0').slice(0, 4)}`;
				// 			}
				// 		})
				// 		break;
				// 	default:
				// 		break;
				// }


				// setTimeout(() => {
				// 	this.formData.address.address_number = newVal ? newVal : tt
				// 	this.formData.ID = newVal ? newVal : tt
				// }, 1)
			},
			checkAddress() {
				let tt = this.formData.address.address_number
				let newVal = ''
				switch (true) {
					case /^(\d+)-(\d+)-(\d+)$/.test(tt):
						newVal = tt.replace(/^(\d+)-(\d+)-(\d+)$/, (match, g1, g2, g3) => {
							// 补齐后两组数字为两位数
							return `${g1}-${g2.padStart(2, '0').slice(0, 2)}-${g3.padStart(2, '0').slice(0, 2)}`;
						})
						break;
						// case /^(\d+)-(\d+)$/.test(tt):
						// 	newVal = tt.replace(/^(\d+)-(\d+)$/, (match, g1, g2) => {
						// 		// 补齐后一组数字为两位数
						// 		return `${g1}-${g2.padStart(2, '0').slice(0, 2)}`;
						// 	})
						// 	break;
					case /^(\d+)-(D?\d+)$/.test(tt):
						newVal = tt.replace(/^(\d+)-(D?\d+)$/, (match, g1, g2) => {
							// 如果有字母D，确保数字最多两位，补足不足的位
							if (/D/i.test(g2)) {
								return `${g1}-${g2.replace(/(\d+)\d*$/, (num) => num.padStart(2, '0').slice(0, 2))}`;
							} else {
								// 如果没有字母D，确保第二组是两位数字
								return `${g1}-${g2.padStart(2, '0').slice(0, 2)}`;
							}
						})
						break;
					default:
						break;
				}

				setTimeout(() => {
					this.formData.address.address_number = newVal ? newVal : tt
					this.formData.ID = newVal ? newVal : tt
				}, 1)
			},


			/**
			 * 获取表单数据
			 * @param {Object} id
			 */
			getDetail(id) {
				uni.showLoading({
					mask: true
				})
				db.collection(dbCollectionName).doc(id).field(
					'ID,address,banner,name,location,logo_src,business_license,shop_desc,website,phone,online,state,apply_state'
				).get().then((res) => {
					const data = res.result.data[0]
					// console.log(data);
					if (data) {
						this.formData = Object.assign({}, this.formData, data);
					}
					if (this.formData.location) {
						this.showLocation = true
					}
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		max-width: 800px;
		height: 100vh;
		/* 设置最大宽度 */
		margin: 0 auto;
		/* 居中显示 */
		// padding: 20px;
		/* 添加内边距（可选） */
		background-color: #eee;

	}

	.top-btn-box {
		display: flex;
		justify-content: flex-end;
		width: 600px;
		height: 80rpx;

		.top-btn {
			background-color: deepskyblue;
			color: #fff;
		}
	}

	.shop-name-note {
		font-size: 24rpx;
		color: #777;
		padding-left: 20rpx;
	}

	.align-items-center {
		display: flex;
		align-items: center;
	}

	.background {
		background-color: #eee;
		padding: 10rpx;
		border-radius: 6rpx;
	}

	.shop-id-box {
		background-color: #efefef;
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 6rpx;

		text {
			color: #999;
		}
	}

	.button-group {
		width: 100%;
		margin: 70rpx 0;
		padding-bottom: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;

		.button-style {
			width: 100px;
			height: 70rpx;
			line-height: 70rpx;
			background-color: #ddd;
		}
	}

	.location-box {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}

	.multi-btn-group {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title-box {
			// margin: 0 auto;
			// /* 使第一个元素居中 */
			// text-align: center;

			// /* 内容居中 */
			text {
				color: #555;
			}
		}

		.right-text-box {
			margin-right: 20rpx;

			text {
				color: #555;
			}
		}
	}

	.multi-lang-box {
		width: 100%;
		margin-top: 30rpx;

		.top-btn-box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.phone-input {
		display: flex;
		align-items: center;
	}

	.country-code {
		// padding: 10px;
		// border: 1px solid #ccc;
		cursor: pointer;
		margin-right: 6rpx;
	}

	.dropdown {
		position: absolute;
		border: 1px solid #ccc;
		border-radius: 4rpx;
		background: white;
		z-index: 1000;
		width: 100rpx;
		/* 根据需要调整宽度 */
	}

	.dropdown-item {
		padding: 10rpx;
		cursor: pointer;
	}

	.dropdown-item:hover {
		background: #f0f0f0;
		/* 鼠标悬停时的效果 */
	}
</style>